<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="../css/main.css" />
</head>

<body>
	<div class="admin-main">
		<blockquote class="layui-elem-quote">
			<fieldset class="layui-elem-field layui-hide" id="box">
				<legend>实时通知</legend>
				<div class="layui-field-box" id="cinfobox"></div>
			</fieldset>
		</blockquote>
		<fieldset class="layui-elem-field">
			<legend id="re"> 通知记录 </legend>
			<div class="layui-field-box" id="infobox"></div>
		</fieldset>
		<fieldset class="layui-elem-field">
			<legend id="load"> &nbsp;&nbsp;加载更多 </legend>
		</fieldset>
	</div>

	<script type="text/javascript" src="../plugins/layui/layui.js"></script>
	<script type="text/javascript"
		src="http://localhost:8080/Bank/js/sockjs-0.3.min.js"></script>
	<script type="text/javascript" src="../js/websocket.js"></script>
	<script>
		layui.use([ 'layer' ], function() {
	
			var $ = layui.jquery,
				layer = layui.layer;
	
			//一页的数量
			var count = 8,
				//当前页数
				curr = 1;
	
			getAll();
	
			//加载数据
			$('#load').on('click', function() {
				getAll();
			});
			
			//刷新
			$('#re').on('click', function() {
				curr=1;
				$('#infobox').html('');
				getAll();
				layer.msg('刷新成功');
			});
	
			//获取分页总数
			function getAll() {
				json = {
					"message" : curr + "",
					"groups" : count
				};
				$.ajax({
					url : '../allInfosByPage',
					type : "POST",
					data : JSON.stringify(json),
					async : false,
					dataType : 'json',
					contentType : 'application/json;charset=utf-8',
					success : function(msg) {
						var infos = msg.info;
						for (var i in infos) {
							var info = infos[i];
							$('#infobox').append('<fieldset class="layui-elem-field layui-field-title">' +
								'<legend>&nbsp;&nbsp;' + info.title + '&nbsp;&nbsp;&nbsp;&nbsp;发布者: ' + info.user.name + ' &nbsp;' + info.time + '</legend>' +
								'<div class="layui-field-box">' + info.content + '</div></fieldset>');
						}
						curr++;
					}
				});
			}
	
		});
	</script>
</body>

</html>